<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入生意参谋"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数据数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/生意参谋导入模板.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/pdt/product-log/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dataStaticDialogShowed" title="折线图统计">
      <div v-loading="loadingData">
        <el-tabs v-model="activeName" @tab-click="handleChangeTab">
          <el-tab-pane label="访客数" name="visitorNum">
            <chart :option="chartOption('访客数','visitorNum')"/>
          </el-tab-pane>
          <el-tab-pane label="商品浏览数" name="viewNum">
            <chart :option="chartOption('商品浏览数','viewNum')"/>
          </el-tab-pane>
          <el-tab-pane label="平均停留时长" name="aveStayTime">
            <chart :option="chartOption('平均停留时长','aveStayTime')"/>
          </el-tab-pane>
          <el-tab-pane label="详情页跳出率(%)" name="detailJumpOutPercent">
            <chart :option="chartOption('详情页跳出率(%)','detailJumpOutPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="商品收藏人数" name="collectedManNum">
            <chart :option="chartOption('商品收藏人数','collectedManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="商品加购件数" name="cartedSpuNum">
            <chart :option="chartOption('商品加购件数','cartedSpuNum')"/>
          </el-tab-pane>
          <el-tab-pane label="商品加购人数" name="cartedManNum">
            <chart :option="chartOption('商品加购人数','cartedManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="下单买家数" name="orderedManNum">
            <chart :option="chartOption('下单买家数','orderedManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="下单件数" name="orderedSpuNum">
            <chart :option="chartOption('下单件数','orderedSpuNum')"/>
          </el-tab-pane>
          <el-tab-pane label="下单金额(￥)" name="orderedAmount">
            <chart :option="chartOption('下单金额(￥)','orderedAmount')"/>
          </el-tab-pane>
          <el-tab-pane label="下单转化率(%)" name="orderedConversionPercent">
            <chart :option="chartOption('下单转化率(%)','orderedConversionPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="支付买家数" name="payedManNum">
            <chart :option="chartOption('支付买家数','payedManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="支付件数" name="payedSpuNum">
            <chart :option="chartOption('支付件数','payedSpuNum')"/>
          </el-tab-pane>
          <el-tab-pane label="支付金额(￥)" name="payedAmount">
            <chart :option="chartOption('支付金额(￥)','payedAmount')"/>
          </el-tab-pane>
          <el-tab-pane label="支付转化率(%)" name="payedConversionPercent">
            <chart :option="chartOption('支付转化率(%)','payedConversionPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="支付新买家数" name="payedNewManNum">
            <chart :option="chartOption('支付新买家数','payedNewManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="支付老买家数" name="payedOldManNum">
            <chart :option="chartOption('支付老买家数','payedOldManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="老买家支付金额(￥)" name="payedOldManAmount">
            <chart :option="chartOption('老买家支付金额(￥)','payedOldManAmount')"/>
          </el-tab-pane>
          <el-tab-pane label="聚划算支付金额(￥)" name="payedJhsAmount">
            <chart :option="chartOption('聚划算支付金额(￥)','payedJhsAmount')"/>
          </el-tab-pane>
          <el-tab-pane label="访客平均价值" name="aveVisitorValue">
            <chart :option="chartOption('访客平均价值','aveVisitorValue')"/>
          </el-tab-pane>
          <el-tab-pane label="售中售后成功退款金额" name="refundAmount">
            <chart :option="chartOption('售中售后成功退款金额','refundAmount')"/>
          </el-tab-pane>
          <el-tab-pane label="搜索引导支付转化率(%)" name="searchToPayPercent">
            <chart :option="chartOption('搜索引导支付转化率(%)','searchToPayPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="搜索引导访客数" name="searchToVisitorNum">
            <chart :option="chartOption('搜索引导访客数','searchToVisitorNum')"/>
          </el-tab-pane>
          <el-tab-pane label="搜索引导支付买家数" name="searchToPayManNum">
            <chart :option="chartOption('搜索引导支付买家数','searchToPayManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="收藏率(%)" name="collectedPercent">
            <chart :option="chartOption('收藏率(%)','collectedPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="加购率(%)" name="cartedPercent">
            <chart :option="chartOption('加购率(%)','cartedPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="收藏加购率(%)" name="collectedAndCartedPercent">
            <chart :option="chartOption('收藏加购率(%)','collectedAndCartedPercent')"/>
          </el-tab-pane>
          <el-tab-pane label="刷单数量" name="clickFarmingSaleNum">
            <chart :option="chartOption('刷单数量','clickFarmingSaleNum')"/>
          </el-tab-pane>
          <el-tab-pane label="真实销量" name="realSaleNum">
            <chart :option="chartOption('真实销量','realSaleNum')"/>
          </el-tab-pane>
          <el-tab-pane label="真实访客数" name="realVisitorNum">
            <chart :option="chartOption('真实访客数','realVisitorNum')"/>
          </el-tab-pane>
          <el-tab-pane label="真实收藏人数" name="realCollectedManNum">
            <chart :option="chartOption('真实收藏人数','realCollectedManNum')"/>
          </el-tab-pane>
          <el-tab-pane label="真实加购人数" name="realCartedManNum">
            <chart :option="chartOption('真实加购人数','realCartedManNum')"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="removeCondShowed"
      title="批量清理"
      width="500px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-form ref="form" :model="removeCondForm" :rules="removeCondRule" label-width="80px">
        <el-form-item prop="logDate" label="统计日期">
          <el-date-picker
            v-model="removeCondForm.logDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            size="mini"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="{
              ...dateRangePickerOptions,
              disabledDate: (time) => {
                return time.getTime() > Date.now()
              }
            }"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="removeCondShowed = false">取消</el-button>
        <el-button size="mini" type="primary" :loading="isRemovingCond" @click="handleRemoveCond">确定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import ProductStatusEnum from '@/feature/pdt/infra/constants/ProductStatusEnum'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import { productLogApi } from '@/feature/pdt/infra/api/productLogApi'
import CURDTable from '@/framework/components/table/CURDTable'
import FileUploader from '@/framework/components/FileUploader'
import DateType from '@/framework/constant/DateType'
import Chart from '@/components/chart/Chart'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import { dateRangePickerOptions } from '@/framework/constant/DatePickerOptions'
import { clickFarmApi } from '@/feature/cmt/infra/api/clickFarmApi'

export default {
  components: { Chart, CURDTable, FileUploader },
  data() {
    return {
      importDialogShowed: false,
      activeName: 'visitorNum',
      removeCondShowed: false,
      dateRangePickerOptions,
      isRemovingCond: false,
      removeCondForm: {
        logDate: []
      },
      removeCondRule: {
        logDate: [
          {
            required: true,
            message: '请选择统计日期',
            trigger: 'blur'
          }
        ]
      },
      dataStaticDialogShowed: false,
      option: {
        requestApi: productLogApi,
        disableDefaultSearchParam: true,
        showSelection: true,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            width: 120,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '统计日期',
            type: ColumnType.DATE,
            sortable: 'custom',
            required: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            width: 110,
            prop: 'logDate',
            searchable: true
          },
          {
            label: '商品ID',
            width: 110,
            searchOption: {
              options: {
                type: ColumnType.TEXTAREA
              }
            },
            searchable: true,
            required: true,
            clickable: true,
            prop: 'productId'
          },
          {
            label: '上新日期',
            width: 110,
            searchable: false,
            hiddenInForm: true,
            type: ColumnType.DATE,
            prop: 'newArrivalDate'
          },
          {
            label: '商品名称',
            width: 390,
            searchable: false,
            required: true,
            prop: 'productName'
          },
          {
            label: '货号',
            width: 80,
            searchable: true,
            required: true,
            prop: 'itemNo'
          },
          // {
          //   label: '',
          //   prop: 'productId',
          //   searchable: true,
          //   type: ColumnType.SELECT
          // },
          {
            label: '状态',
            width: 90,
            required: true,
            prop: 'productStatus',
            type: ColumnType.RADIO,
            searchable: true,
            options: ProductStatusEnum
          },
          {
            label: '访客数',
            sortable: 'custom',
            width: 90,
            prop: 'visitorNum',
            searchable: true,
            required: true,
            type: ColumnType.NUMBER
          },
          {
            label: '真实访客数',
            sortable: 'custom',
            width: 120,
            prop: 'realVisitorNum',
            required: true,
            type: ColumnType.NUMBER
          },
          {
            label: '商品浏览数',
            width: 110,
            sortable: 'custom',
            prop: 'viewNum',
            required: true,
            type: ColumnType.NUMBER
          },
          {
            label: '平均停留时长',
            type: ColumnType.NUMBER,
            sortable: 'custom',
            width: 120,
            prop: 'aveStayTime'
          },
          {
            label: '详情页跳出率(%)',
            width: 140,
            type: ColumnType.NUMBER,
            sortable: 'custom',
            prop: 'detailJumpOutPercent'
          },
          {
            label: '商品收藏人数',
            sortable: 'custom',
            width: 120,
            searchable: true,
            prop: 'collectedManNum',
            type: ColumnType.NUMBER
          }, {
            label: '真实收藏人数',
            sortable: 'custom',
            width: 120,
            prop: 'realCollectedManNum',
            type: ColumnType.NUMBER
          },
          {
            label: '商品加购件数',
            sortable: 'custom',
            width: 120,
            prop: 'cartedSpuNum',
            type: ColumnType.NUMBER
          },
          {
            label: '商品加购人数',
            sortable: 'custom',
            searchable: true,
            prop: 'cartedManNum',
            width: 120,
            type: ColumnType.NUMBER
          }, {
            label: '真实加购人数',
            sortable: 'custom',
            prop: 'realCartedManNum',
            width: 120,
            type: ColumnType.NUMBER
          },
          {
            label: '下单买家数',
            prop: 'orderedManNum',
            sortable: 'custom',
            width: 110,
            type: ColumnType.NUMBER
          },
          {
            label: '下单件数',
            prop: 'orderedSpuNum',
            width: 100,
            sortable: 'custom',
            type: ColumnType.NUMBER
          },
          {
            label: '下单金额(￥)',
            width: 120,
            sortable: 'custom',
            type: ColumnType.NUMBER,
            prop: 'orderedAmount'
          },
          {
            label: '下单转化率(%)',
            width: 130,
            sortable: 'custom',
            type: ColumnType.NUMBER,
            prop: 'orderedConversionPercent'
          },
          {
            label: '支付买家数',
            sortable: 'custom',
            prop: 'payedManNum',
            width: 120,
            type: ColumnType.NUMBER
          },
          {
            label: '支付件数',
            sortable: 'custom',
            prop: 'payedSpuNum',
            width: 110,
            type: ColumnType.NUMBER
          },
          {
            label: '支付金额(￥)',
            width: 130,
            sortable: 'custom',
            prop: 'payedAmount',
            type: ColumnType.NUMBER
          },
          {
            label: '支付转化率(%)',
            width: 130,
            sortable: 'custom',
            type: ColumnType.NUMBER,
            prop: 'payedConversionPercent'
          },
          {
            label: '支付新买家数',
            width: 130,
            sortable: 'custom',
            prop: 'payedNewManNum',
            type: ColumnType.NUMBER
          },
          {
            label: '支付老买家数',
            width: 120,
            sortable: 'custom',
            prop: 'payedOldManNum',
            type: ColumnType.NUMBER
          },
          {
            label: '老买家支付金额(￥)',
            sortable: 'custom',
            width: 160,
            type: ColumnType.NUMBER,
            prop: 'payedOldManAmount'
          },
          {
            label: '聚划算支付金额(￥)',
            sortable: 'custom',
            type: ColumnType.NUMBER,
            width: 150,
            prop: 'payedJhsAmount'
          },
          {
            label: '访客平均价值',
            type: ColumnType.NUMBER,
            sortable: 'custom',
            width: 120,
            prop: 'aveVisitorValue'
          },
          {
            label: '售中售后成功退款金额',
            width: 200,
            type: ColumnType.NUMBER,
            sortable: 'custom',
            prop: 'refundAmount'
          },
          {
            label: '搜索引导支付转化率(%)',
            width: 180,
            type: ColumnType.NUMBER,
            sortable: 'custom',
            prop: 'searchToPayPercent'
          },
          {
            label: '搜索引导访客数',
            width: 130,
            sortable: 'custom',
            prop: 'searchToVisitorNum',
            type: ColumnType.NUMBER
          },
          {
            label: '搜索引导支付买家数',
            sortable: 'custom',
            width: 160,
            prop: 'searchToPayManNum',
            type: ColumnType.NUMBER
          },
          {
            label: '收藏率(%)',
            width: 110,
            sortable: 'custom',
            hiddenInForm: true,
            type: ColumnType.NUMBER,
            prop: 'collectedPercent'
          },
          {
            label: '加购率(%)',
            width: 110,
            sortable: 'custom',
            hiddenInForm: true,
            type: ColumnType.NUMBER,
            prop: 'cartedPercent'
          },
          {
            label: '收藏加购率(%)',
            width: 130,
            sortable: 'custom',
            hiddenInForm: true,
            type: ColumnType.NUMBER,
            prop: 'collectedAndCartedPercent'
          },

          {
            label: '是否已刷单',
            width: 110,
            hiddenInForm: true,
            prop: 'clickFarmingFlag',
            type: ColumnType.RADIO,
            searchable: true,
            options: YesNoEnum
          }, {
            label: '刷单数量',
            width: 110,
            hiddenInForm: true,
            prop: 'clickFarmingSaleNum'
          },
          {
            label: '真实销量',
            width: 110,
            searchable: true,
            hiddenInForm: true,
            prop: 'realSaleNum',
            type: ColumnType.NUMBER
          },
          // {
          //   label: '主图',
          //   type: ColumnType.IMAGE,
          //   prop: 'mainImg'
          // },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      },
      currentDataList: [],
      loadingData: false
    }
  },
  methods: {
    handleClearAll() {
      this.removeCondForm.logDate = []
      this.removeCondShowed = true
      // this.$refs.table.clearSelection()
    },
    handleRemoveCond() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isRemovingCond = true
          productLogApi.removeByCondition(this.removeCondForm).then(() => {
            this.isRemovingCond = false
            this.$refs.table.reloadTable()
            this.removeCondShowed = false
          }).catch(() => {
            this.isRemovingCond = false
          })
        }
      })
    },
    handleClickProductId({ arg }) {
      this.dataStaticDialogShowed = true
      this.loadingData = true
      productLogApi.list({ productId: arg.productId, pageNo: 1, pageSize: 100 }).then(data => {
        this.currentDataList = data.data.sort((a, b) => a.logData > b.logData ? 1 : -1)
      }).finally(() => {
        this.loadingData = false
      })
    },
    chartOption(title, field) {
      return {
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     dataView: {readOnly: false},
        //     magicType: {type: ['line', 'bar']},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          data: this.currentDataList.map(el => el.logDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.currentDataList.map(el => el[field]),
            type: 'line',
            smooth: false
          }
        ]
      }
    },
    handleChangeTab() {

    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    }
  }
}
</script>

